<template>
<div id="userListAdd">
    <Modal v-model="userList.userListAddSta" title="新增用户" :loading="loading" @on-ok="userListAddOk" @on-cancel="userListAddCancel">
        <Form ref="userListAddForm" :model="userListAddForm" :rules="userListAddRule" label-position="right" :label-width="100">
            <Row>
                <Col :span="20">
                <FormItem label="用户名:" prop="name">
                    <Input v-model="userListAddForm.name"></Input>
                </FormItem>
                <FormItem label="密码:" prop="pwd">
                    <Input v-model="userListAddForm.pwd"></Input>
                </FormItem>
                <FormItem label="确认密码:" prop="verifyPwd">
                    <Input v-model="userListAddForm.verifyPwd"></Input>
                </FormItem>
                </Col>
            </Row>
        </Form>
    </Modal>
</div>
</template>
<script>
import Vue from 'vue'
import {
    Modal,
    Row,
    Col,
    Form,
    FormItem,
    Input,
    Message
} from 'iview'
Vue.prototype.$Message = Message; //Message的注册应该使用下面的方法

//解决axios post不能传递参数
import qs from 'qs'

import {
    mapState,
    mapMutations
} from 'vuex'

export default {
    data() {
        //确认密码
        const verifyPwdRuleFn = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('请确认新密码'))
            } else if (value != this.userListAddForm.pwd) {
                callback(new Error('确认密码和密码不一致'));
            } else {
                callback();
            }
        }
        return {
            loading: true,
            userListAddForm: {
                name: '',
                pwd: '',
                verifyPwd: ''
            },
            userListAddRule: {
                name: {
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                },
                pwd: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }, {
                    min: 6,
                    message: '密码长度至少6位',
                    trigger: 'blur'
                }],
                verifyPwd: [{
                    required: true,
                    validator: verifyPwdRuleFn,
                    trigger: 'blur'
                }]
            }
        }
    },
    computed: {
        ...mapState({
            userList: state => state.userList
        })
    },
    methods: {
        ...mapMutations([
            'userListAddStaMut' //隐藏模态框
        ]),
        //新增用户提交
        userListAddOk() {
            setTimeout(() => {
                this.$refs['userListAddForm'].validate((valid) => {
                    if (valid) {
                        let _self = this;
                        //利用qs解决后台获取不到post数据
                        var obj = qs.stringify({
                            username: this.userListAddForm.name,
                            password: this.userListAddForm.pwd
                        });
                        this.$axios.post('/user/insertUserInfo', obj).then(function(res) {
                            if (res.data.code == 200) {
                                _self.userListAddStaMut();
                            } else {
                                _self.$Message.error('修改密码失败，请确认后重新输入');
                            }
                        })
                    }
                })
                this.loading = false;
                this.$nextTick(() => {
                    this.loading = true;
                });
            }, 1000);
        },
        //新增用户取消
        userListAddCancel() {
            this.$refs['userListAddForm'].resetFields();
            this.userListAddStaMut();
        }
    },
    components: {
        Modal,
        Row,
        Col,
        Form,
        FormItem,
        Input,
        Message
    }
}
</script>
